<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/oauthplatform/static/sms/css/base.css"/>
	<link rel="stylesheet" href="/oauthplatform/static/sms/plugin/layui/css/layui.css">
	<title>统一身份认证管理平台</title>
	<style>
		.content {
			width: 960px;
			margin: 0 auto;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -330px 0 0 -481px;
		}

		.title {
			font-size: 16px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1765AD;
			margin: 0 0 25px 0;
		}

		.mainBody {
			height: 578px;
			background: #FFFFFF;
			border: 1px solid #E9E9E9;
			box-shadow: 1px 1px 1px 0px rgba(241, 239, 239, 0.75);
			padding-top: 32px;
			padding-left: 44px;
		}

		.mainBodyTitle {
			width: 100px;
			height: 20px;
			line-height: 20px;
			font-size: 16px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			border-left: 4px solid #1765AD;
			text-align: right;
			margin-bottom: 50px;
		}

		.layui-form {
			display: flex;
			flex-wrap: wrap;
		}

		.layui-form-item {
			display: flex;
			width: 425px;
			margin-right: 24px;
			margin-bottom: 32px;
		}

		.layui-form-label {
			width: 20%;
			height: 50px;
			line-height: 50px;
			padding: 0;
			text-align: left;
			font-size: 14px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
		}

		.inputStyle {
			width: 80%;
			height: 50px;
			border: 1px solid #E5E5E5;
			border-radius: 10px;
		}

		.layui-form-label span {
			color: #1765AD;
			font-size: 20px;
			padding-right: 6px;
			position: relative;
			top: 6px;
		}

		.code-item {
			border: 1px solid #E5E5E5;
			border-radius: 10px;
			width: 425px;
		}

		.codeInput {
			width: 70%;
			height: 50px;
			border: none;
			margin-left: 6px;
		}

		.getCode {
			height: 50px;
			width: 30%;
			padding: 0;
			border: none;
			margin-right: 5px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1765AD;
		}

		.layui-form-checked[lay-skin=primary] i {
			background-color: #1765AD;
		}

		.layui-form-checkbox[lay-skin=primary]:hover i {
			border-color: #1765AD;
		}

		.register {
			margin-top: 50px;
			width: 353px;
			height: 50px;
			background: #1765AD;
			border-radius: 10px;
			margin-left: auto;
			margin-right: auto;
			font-size: 18px;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="title">实名认证及账号绑定</div>
	<div class="mainBody">
		<div class="mainBodyTitle">填写实名信息</div>
		<form class="layui-form" action="" id="dataForm">
			<input type="hidden" name="id" value="${(personalInFormation.id?c)!}">
			<div class="layui-form-item">
				<label class="layui-form-label"><span>*</span>真实姓名</label>
				<input type="text" name="name" lay-verify="required|realName" placeholder="怎么称呼您？" autocomplete="off"
				       class="layui-input inputStyle">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span>*</span>身份证号</label>
				<input type="text" name="idCard" lay-verify="identity" placeholder="请输入身份证号码" autocomplete="off"
				       class="layui-input inputStyle">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span>*</span>联系电话</label>
				<input type="tel" name="phone" lay-verify="required|phoneNew" placeholder="请输入手机号" autocomplete="off"
				       class="layui-input inputStyle phone-val">
			</div>
			<div class="layui-form-item code-item">
				<input type="text" name="codePhone" lay-verify="required|number" placeholder="请输入验证码" autocomplete="off"
				       class="layui-input codeInput">
				<button type="button" class="layui-btn layui-btn-primary getCode">获取手机验证码</button>
			</div>
			<input type="checkbox" name="Checkbox" title="本人承诺：上述所填信息均真实、合法、有效。若因该信息存在虚假、不实，或违反法律法规而引起的一切责任均由本人自行承担"
			       lay-skin="primary" value="on">
			<button type="button" class="layui-btn layui-btn-fluid register" lay-submit lay-filter="submit_button">提交
			</button>
		</form>
	</div>
</div>
</body>
<script src="/oauthplatform/static/sms/js/jquery.min.js"></script>
<script src="/oauthplatform/static/sms/plugin/layui/layui.js"></script>
<script>
	$(function () {
		if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
			var id = "${(personalInFormation.id?c)!}";
			post("/oauthplatform/h5SignIn/verified", {id: id})
		}
	})
	layui.use('form', function () {
		var form = layui.form;
		form.verify({
			realName: [
				/^[\u4e00-\u9fa5]{2,6}$/,
				'真实姓名必须2到6位的汉字，且不能出现空格'
			],
			phoneNew: [
				/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/,
				'请输入正确的手机号'
			]
		});
		// input 焦点事件
		$(".phone-val").blur(function () {
			$(".phone-val").removeAttr("style");
		})
		// 获取验证码点击事件
		$(".getCode").click(function () {
			var phone = $(".phone-val").val();
			var phoneReg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
			if (phone == '') {
				layer.msg("手机号码不能为空！");
				$(".phone-val").attr("style", "color: red;");
			} else if (phone.length != 11) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else if (!phoneReg.test(phone)) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else {
				checkPhoneIsExist();
			}
		});

		// 验证手机号是否信息完善
		function checkPhoneIsExist() {
			var phone = $(".phone-val").val();
			$.ajax({
				type: 'get',
				data: {
					mobile: phone,
					codePhoneType: "1",
				},
				url: '/oauthplatform/code/sms',
				success: function (data) {
					if (data == 200) {
						var time = 60;
						var getTime = setInterval(function () {
							if (time == -1) {
								clearInterval(getTime);
								$(".getCode").prop('disabled', false);
								$(".getCode").text("获取验证码");
								time = 60;
								return;
							} else {
								$(".getCode").prop('disabled', true);
								$(".getCode").text("" + time + "s后重新发送");
								time--;
							}
						}, 1000);
					} else if (data == 121) {
						layer.msg("无该手机号信息，请账号登录！");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else if (data == 122) {
						layer.msg("该用户实名认证未完善，请账号登录完善！");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else if (data == 123) {
						layer.msg("手机号已经被注册！请联系管理员或使用账号登录");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else {
						layer.msg("网络异常请稍后重试！");
					}
				}
			})
		};

		//监听登录
		form.on('submit(submit_button)', function (data) {
			if (!data.field.Checkbox) {
				layer.msg("请阅读承诺并请勾选！");
			} else {
				$.ajax({
					type: "POST",
					url: "/oauthplatform/improvePersonalInformation",
					data: $('#dataForm').serialize(),
					success: function (result) {
						layer.msg(result.msg);
						setTimeout(function(){
							if (parseInt(result.code) === 200) { Jump("/oauthplatform/home/index"); }
						},1000);
					},
					error: function (result) {
						layer.msg("系统异常,请联系管理员");
						 setTimeout(function(){
							 Jump("/oauthplatform/login/index");
						 },1000);
					}
				});
			}
			return false;
		});
	});

	function post(URL, PARAMS) {
		var temp = document.createElement("form");
		temp.action = URL;
		temp.method = "post";
		temp.style.display = "none";
		for (var x in PARAMS) {
			var opt = document.createElement("textarea");
			opt.name = x;
			opt.value = PARAMS[x];
			temp.appendChild(opt);
		}
		document.body.appendChild(temp);
		temp.submit();
		return temp;
	}
	
	function Jump(URL) {
		window.location.href = URL;
	}
</script>
</html>